{% extends "base.html" %}
{% block title %}主页{% endblock %}
{% block content %}

    <script src="http://172.16.8.86/static_files/jquery-3.3.1.min.js"></script>
    <!-- Echart -->
    <script type="text/javascript" src="http://img.foshanplus.com/js/common.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://172.16.8.86/static_files/echarts.min.js" charset="utf-8"></script>


    <title>测试</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>
<!-- <body style="background: #333"> -->

<body>
    <div id="allmap"></div>
</body>

{% endblock %}

<script type="text/javascript">
var myChart = echarts.init(document.getElementById("allmap"))
var uploadedDataURL  = "/static/data.json"
var getDataURL  = "/news/"+{{page}}+"/"

$.ajax({
    url: getDataURL,
    useDefaultXhrHeader: false, //important, otherwise its not working
    type: "GET",
    dataType: 'text',
    success: function(response, opts) {
        res = JSON.parse(response)
        console.log(res)
        geodata = convertGeoData(res.city_list)
        geodata1 = convertGeoData(res.center_citys)

        $.ajax({
            url: uploadedDataURL,
            useDefaultXhrHeader: false, //important, otherwise its not working
            type: "GET",
            success: function(gdJson) {

            echarts.registerMap('广东', gdJson)

            day1 = converGeoColor(0, res.center_citys, res.series)
            day2 = converGeoColor(1, res.center_citys, res.series)
            day3 = converGeoColor(2, res.center_citys, res.series)

            option = {
                    //timeline基本配置都写在baseoption 中
                    baseOption: {
                        timeline: {
                            loop: true,
                            axisType: 'category',
                            show: true,
                            autoPlay: true,
                            playInterval: 3000,
                            data: ['24小时', '48小时','72小时'],
                            checkpointStyle: {
                                color: '#04a5f1',
                                borderColor: 'rgba(4, 165, 261, .5)'
                            },
                            itemStyle: {
                                normal: {
                                    color: '#04a5f1'
                                },
                                emphasis: {
                                    color: '#04a5f1'
                                }
                            },
                            lineStyle: {
                                color: '#ddd'
                            },
                            label:{
                                color: '#7bbfea'
                            }
                        },

                        backgroundColor: '#404a59',
                        title: {
                            text: '广东媒体传播',
                            left: 'center',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        geo: {
                            map: '广东',
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            roam: true,
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    areaColor: '#031525',
                                    borderColor: '#3B5077'
                                },
                                emphasis: {
                                    areaColor: '#031525'
                                }
                            },

                        },

                        series: []
                    },
                    //变量则写在options中
                    options:[
                        {
                            geo: {
                                regions: day1.geo
                            },
                            series: [{
                                name: '24小时',
                                type: 'lines',
                                coordinateSystem: 'geo',
                                //polyline:true,
                                symbol: ['none', 'triangle'],
                                zlevel: 2,
                                effect: {
                                    show: true,
                                    symbol: 'roundRect',
                                    period: 2,
                                    delay: 100,
                                    trailLength: 0.6,
                                    symbolSize: 6,
                                },
                                lineStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#ed1941'
                                            }, {
                                                offset: 1,
                                                color: '#ffce7b'
                                            }],
                                            globalCoord: false
                                        },
                                        width: 1,
                                        opacity: 0.8,
                                        //type: 'dotted',
                                        curveness: 0.2,
                                    }
                                },
                                data: day1.coords
                            },{
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                showEffectOn: 'render',
                                zlevel: 3,
                                symbol: 'circle',
                                symbolSize: 5,
                                rippleEffect: {
                                    brushType: 'stroke',
                                    period: 5,
                                    scale: 7
                                },
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        offset: [1, 6],
                                        show: true,
                                        textStyle: {
                                            color: "yellow"
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: 'yellow'
                                    }
                                },
                                data: geodata
                            }, {
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                showEffectOn: 'render',
                                zlevel: 3,
                                symbol: 'circle',
                                symbolSize: 7,
                                rippleEffect: {
                                    brushType: 'stroke',
                                    period: 2,
                                    scale: 10
                                },
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        //offset: [1, -3],
                                        show: true,
                                        textStyle: {
                                            color: "yellow"
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: 'yellow'
                                    }
                                },
                                data: geodata1
                            }]
                        },{
                            geo: {
                                regions: day2.geo
                            },
                            series: [{
                                name: '48小时',
                                type: 'lines',
                                coordinateSystem: 'geo',
                                //polyline:true,
                                symbol: ['none', 'triangle'],
                                zlevel: 2,
                                effect: {
                                    show: true,
                                    symbol: 'roundRect',
                                    period: 2,
                                    delay: 100,
                                    trailLength: 0.6,
                                    symbolSize: 6,
                                },
                                lineStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#ed1941'
                                            }, {
                                                offset: 1,
                                                color: '#cbb0e3'
                                            }],
                                            globalCoord: false
                                        },
                                        width: 1,
                                        opacity: 0.8,
                                        //type: 'dotted',
                                        curveness: 0.2,
                                    }
                                },
                                data: day2.coords
                            },{
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                showEffectOn: 'render',
                                zlevel: 3,
                                symbol: 'circle',
                                symbolSize: 5,
                                rippleEffect: {
                                    brushType: 'stroke',
                                    period: 5,
                                    scale: 7
                                },
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        offset: [1, 6],
                                        show: true,
                                        textStyle: {
                                            color: "yellow"
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: 'yellow'
                                    }
                                },
                                data: geodata
                            }, {
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                showEffectOn: 'render',
                                zlevel: 3,
                                symbol: 'circle',
                                symbolSize: 7,
                                rippleEffect: {
                                    brushType: 'stroke',
                                    period: 2,
                                    scale: 10
                                },
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        //offset: [1, -3],
                                        show: true,
                                        textStyle: {
                                            color: "yellow"
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: 'yellow'
                                    }
                                },
                                data: geodata1
                            }]
                        },
                        {
                            geo: {
                                regions: day3.geo
                            },
                            series: [{
                                name: '72小时',
                                type: 'lines',
                                coordinateSystem: 'geo',
                                //polyline:true,
                                symbol: ['none', 'triangle'],
                                zlevel: 2,
                                effect: {
                                    show: true,
                                    symbol: 'roundRect',
                                    period: 2,
                                    delay: 100,
                                    trailLength: 0.6,
                                    symbolSize: 6,
                                },
                                lineStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: '#ed1941'
                                            }, {
                                                offset: 1,
                                                color: '#cbb0e3'
                                            }],
                                            globalCoord: false
                                        },
                                        width: 1,
                                        opacity: 0.8,
                                        //type: 'dotted',
                                        curveness: 0.2,
                                    }
                                },
                                data: day3.coords
                            },{
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                showEffectOn: 'render',
                                zlevel: 3,
                                symbol: 'circle',
                                symbolSize: 5,
                                rippleEffect: {
                                    brushType: 'stroke',
                                    period: 5,
                                    scale: 7
                                },
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        offset: [1, 6],
                                        show: true,
                                        textStyle: {
                                            color: "yellow"
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: 'yellow'
                                    }
                                },
                                data: geodata
                            }, {
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                showEffectOn: 'render',
                                zlevel: 3,
                                symbol: 'circle',
                                symbolSize: 7,
                                rippleEffect: {
                                    brushType: 'stroke',
                                    period: 2,
                                    scale: 10
                                },
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        //offset: [1, -3],
                                        show: true,
                                        textStyle: {
                                            color: "yellow"
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: 'yellow'
                                    }
                                },
                                data: geodata1
                            }]
                        },

                    ]
                }
            myChart.setOption(option)
        }
       })

    },
    failure: function(response, opts) {alert("failure")}
});


</script>